import React, { Component } from "react";

import { Link } from "react-router-dom";

import { API, BASE_URL } from "../../utils";

import NavHeader from "../../components/NavHeader";
import HouseItem from "../../components/HouseItem";
import NoHouse from "../../components/NoHouse";

import styles from "./index.module.css";

export default class Rent extends Component {
  state = {
    // 出租房屋列表
    list: [],
  };

  // 获取已发布房源的列表数据
  async getHouseList() {
    const res = await API.get("/user/houses");

    const { status, body } = res.data;
    if (status === 200) {
      this.setState({
        list: body,
      });
    } else {
      const { history, location } = this.props;
      history.replace("/login", {
        from: location,
      });
    }
  }

  componentDidMount() {
    this.getHouseList();
  }

  renderHouseItem() {
    const { list } = this.state;
    const { history } = this.props;

    return list.map((item) => {
      return (
        <HouseItem
          key={item.houseCode}
          onClick={() => history.push(`/detail/${item.houseCode}`)}
          src={BASE_URL + item.houseImg}
          title={item.title}
          desc={item.desc}
          tags={item.tags}
          price={item.price}
        />
      );
    });
  }

  renderRentList() {
    const { list } = this.state;
    const hasHouses = list.length > 0;

    if (!hasHouses) {
      return (
        <NoHouse>
          您还没有房源，
          <Link to="/rent/add" className={styles.link}>
            去发布房源
          </Link>
          吧~
        </NoHouse>
      );
    }

    return <div className={styles.houses}>{this.renderHouseItem()}</div>;
  }

  render() {
    const { history } = this.props;

    return (
      <div className={styles.root}>
        <NavHeader
          className={styles.navHeader}
          onLeftClick={() => history.go(-1)}
        >
          房屋管理
        </NavHeader>

        {this.renderRentList()}
      </div>
    );
  }
}
